<template>
  <view>
    <!-- 头部 -->
    <view class="header-box flex">
      <text class="left-name">{{title}}</text>
      <slot></slot>
    </view>
    <!-- 内容区 -->
    <view class="tag-list">
      <text class="tag" v-for="(item,index) in keywords" :key="item" @click="handlerClickTag($parent,index)">
        {{item}}
      </text>

    </view>

  </view>
</template>

<script setup>
  // 事件回调
  // 点击了某项搜索记录
  function handlerClickTag($parent, index) {
    $parent.handlerConfirm({
      value: props.keywords[index]
    });
  }
  // 宏函数
  // props
  const props = defineProps(['title', 'keywords']);
</script>

<style lang="scss" scoped>
  .header-box {
    padding: 30rpx 0;

    .left-name {
      color: $text-color-second;
    }
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;

    .tag {
      border-radius: 30px;
      padding: 13rpx 23rpx;
      white-space: nowrap;
      line-height: 14px;
      font-size: 13px;
      font-weight: bold;
      background-color: #F4F4F4;
      margin: 0 23rpx 23rpx 0;
    }
  }
</style>